<template>
  <div>
    <el-dialog title="组盘规则" :visible.sync="open" width="70%" append-to-body :before-close="closeDelDialog">
      <el-steps  :active="activeName" simple style="width:90%;margin:0 auto;">
        <el-step title="第一步：设置组盘规则" icon="el-icon-setting"></el-step>
        <el-step title="第二步：组盘方案" icon="el-icon-document"></el-step>
        <el-step title="第三步：完成组盘" icon="el-icon-circle-check"></el-step>
      </el-steps>

      <div v-if="activeName == 1" style="width:90%;margin:20px auto;height:650px">
        <ZpRuleEdit ref="zpgzRef" @nextStepTap="nextStepTap" :fondsOption="fondsOption"></ZpRuleEdit>
      </div>

      <div v-if="activeName == 2" style="width:90%;margin:20px auto;height:650px">
        <div style="height: 600px; overflow-y: auto">
          <ZpPlan ref="zpfaRef"></ZpPlan>
        </div>
        <div style="text-align: center; margin-top:20px">
          <el-button type="danger" @click="prevStepTap(0)">上一步</el-button>
          <el-button type="primary" @click="nextStepTap(1)" v-if="isTmpe">下一步</el-button>
        </div>
      </div>

      <div v-if="activeName == 3" style="width:90%;margin:20px auto;height:650px">
        <div style="height: 600px; overflow-y: auto">
          <ZpPlan ref="zpfaRef" :isType="3"></ZpPlan>
        </div>
        <div style="text-align: center; margin-top:20px">
          <el-button type="danger" @click="prevStepTap(1)">上一步</el-button>
          <el-button type="primary" @click="submitTab">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addZpjl,
  completeZp,
  deleteZpgz,
  getZpgzList,
  getZpgzPlan,
  removeZp
} from "@/api/archive/filesManage/diskManageMenu";
import ZpRuleEdit from "@/views/archive/filesManage/diskManageMenu/zpRuleEdit";
import ZpPlan from "@/views/archive/filesManage/diskManageMenu/zpPlan";
import {getFondsByTenantCode} from "@/api/archive/archiveTreeDefinition";
export default {
  name: "zpRule",
  components: {ZpPlan, ZpRuleEdit},
  archive_Dicts: ['BGQX', 'MJ'],
  props: ['open'],
  data() {
    return {
      activeName: 1,
      isTmpe: false,
      zpgzList: [],
      state: '',
      pggId: '',
      fondsOption: [],
      isDisabled: false
    }
  },
  created() {
    this.generalArchive()
  },
  methods: {
    init(val, state) {
      this.pggId = val
      this.state = state
      console.log(state == '1')
      if (state == '1') {
        this.isDisabled = true
      } else {
        this.isDisabled = false
      }
      this.$nextTick(() =>{
        this.$refs.zpgzRef.init(this.pggId, this.isDisabled)
      })
    },
    // 获取全宗数据
    generalArchive() {
      getFondsByTenantCode().then(response => {
        this.fondsOption = response.data.map(option => {
          return {
            value: option.fondsCode,
            label: option.fondsName
          }
        })
      })
    },
    closeDelDialog() {
      this.$emit("closeDelDialog")
    },
    // 上一步
    prevStepTap(val) {
      if (val == 0) {
        this.activeName = 1;
        this.$nextTick(() =>{
          this.$refs.zpgzRef.init(this.pggId, this.isDisabled)
        })
      } else if (val == 1) {
        removeZp(this.pggId).then(response=>{
          this.activeName = 2;
        })
      }
    },
    // 下一步
    nextStepTap(e, val) {
      if (e == 0) {
        val.state = this.state
        val.pggId = this.pggId
        getZpgzPlan(val).then(res=>{
          this.zpgzList = res.data
          if (res.code == 500) {
            this.$modal.msgError(res.msg);
          }
          this.activeName = 2
          if (res.data.length > 0) {
            this.isTmpe = true
          } else {
            this.isTmpe = false
          }
          this.$nextTick(() => {
            this.$refs.zpfaRef.isShow = false
            this.$refs.zpfaRef.init(res.data);
          })
        })
      } else if (e == 1) {
        addZpjl(this.pggId).then(response=>{
          this.activeName = 3
          this.$nextTick(() => {
            this.$refs.zpfaRef.isShow = false
            this.$refs.zpfaRef.init(this.zpgzList);
          })
        })
      }
    },
    // 确认
    submitTab() {
      var dataList = []
      for (let i = 0; i < this.zpgzList.length; i++) {
        const result = Object.keys(this.zpgzList[i]).reduce((obj, item) => {
          const keyValuePairs = item.slice(1, -1).split(', ');
          keyValuePairs.forEach(pair => {
            const [key, value] = pair.split('=');
            obj[key] = value;
          });
          return obj;
        }, {});
        result.List = JSON.parse(JSON.stringify([].concat(...Object.values(this.zpgzList[i]))))
        dataList.push(result)
      }
      console.log(dataList)
      var zpjlIds = dataList.map(item=>item.zpjlId)
      console.log(zpjlIds)
      completeZp(zpjlIds).then(response=>{
        this.$modal.msgSuccess(response.msg)
        this.$emit("closeDelDialog")
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

</style>
